<template>
    <div class="wrap">
        <h1>&nbsp;</h1>
        <div class="banner">
            <img src="storage/public/404.png" alt=""/>
        </div>
        <div class="page">
            <h2>we can't find that page!</h2>
        </div>
        <div class="footer">

        </div>
    </div>
</template>

<script>
    export default {
        name: "404"
    }
</script>

<style>
    /* reset */
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, nav ul, nav li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }

    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
        display: block;
    }

    ol, ul {
        list-style: none;
        margin: 0px;
        padding: 0px;
    }

    blockquote, q {
        quotes: none;
    }

    blockquote:before, blockquote:after, q:before, q:after {
        content: '';
        content: none;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    /* start editing from here */
    a {
        text-decoration: none;
    }

    .txt-rt {
        text-align: right;
    }

    /* text align right */
    .txt-lt {
        text-align: left;
    }

    /* text align left */
    .txt-center {
        text-align: center;
    }

    /* text align center */
    .float-rt {
        float: right;
    }

    /* float right */
    .float-lt {
        float: left;
    }

    /* float left */
    .clear {
        clear: both;
    }

    /* clear float */
    .pos-relative {
        position: relative;
    }

    /* Position Relative */
    .pos-absolute {
        position: absolute;
    }

    /* Position Absolute */
    .vertical-base {
        vertical-align: baseline;
    }

    /* vertical align baseline */
    .vertical-top {
        vertical-align: top;
    }

    /* vertical align top */
    .underline {
        padding-bottom: 5px;
        border-bottom: 1px solid #eee;
        margin: 0 0 20px 0;
    }

    /* Add 5px bottom padding and a underline */
    nav.vertical ul li {
        display: block;
    }

    /* vertical menu */
    nav.horizontal ul li {
        display: inline-block;
    }

    /* horizontal menu */
    img {
        max-width: 100%;
    }

    /*end reset*/
    body {
        font-family: "Century Gothic" Helvetica, sans-serif;
        background: #ccc;
    }

    .wrap {
        margin: 0 auto;
        padding: 10px;
    }

    h1 {
        text-align: center;
        margin-top: 20px;
        color: #603813;
        font-size: 2em;
        text-transform: uppercase;
        font-weight: bold;
    }

    .banner {
        text-align: center;
        margin-top: 20px;
    }

    .page {
        text-align: center;
        font-family: "Century Gothic";
    }

    .page h2 {
        font-size: 1.8em;
        color: rgb(99, 44, 37);
        font-weight: bold;
    }

    .footer {
        font-family: "Century Gothic";
        margin: 20px 0 10px;
    }

    .footer p {
        text-align: right;
        font-size: 1em;
        color: #603813;
    }

    .footer a {
        color: #f9614d;
    }

    .footer a:hover {
        text-decoration: underline;
    }
</style>
